@extends('layouts.app')

@section('content')
    @include('vendor.ueditor.assets')

    <script src="http://www.itxst.com/js/jquery.js"></script>
    <script src="http://www.itxst.com/package/select2/js/select2.full.min.js" defer></script>
    {{--<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>--}}
    <link href="http://www.itxst.com/package/select2/css/select2.css" rel="stylesheet" />
    
    
    <div class="container" style="height: 200px">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">发布问题</div>
                   
                    <div class="card-body">
                        <form action="{{url('questions')}}" method="post">
                            {{csrf_field()}}
                        <div class="form-group">
                            <label for="title">标题</label>
                            <input type="text" name="title" class="form-control {{ $errors->has('title') ? ' is-invalid' : '' }}" value="{{old('title')}}" placeholder="标题" id="title">
                            @if ($errors->has('title'))
                                <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('title') }}</strong>
                                    </span>
                            @endif
                        </div>
                        <div class="form-group">
                            <label for="title">话题</label>
                            <select name="topics[]" id="test" style="width: 90%;" name="" multiple="multiple">
                               
                            </select>
                            
                            @if ($errors->has('title'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('title') }}</strong>
                                </span>
                            @endif
                        </div>
                            

                            <div class="form-group {{ $errors->has('body') ? ' has-error' : '' }}" >
                                <script id="container" class="con_container" name="body" type="text/plain">
                                    {!! old('body') !!}
                                </script>

                                @if ($errors->has('body'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('body') }}</strong>
                                    </span>
                                @endif
                                        
                            </div>
                       
                            <button class="btn btn-success pull-right" type="submit">提交</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container', {
            toolbars: [
                ['bold', 'italic', 'underline', 'strikethrough', 'blockquote', 'insertunorderedlist', 'insertorderedlist', 'justifyleft','justifycenter', 'justifyright',  'link', 'insertimage', 'fullscreen']
            ],
            elementPathEnabled: false,
            enableContextMenu: false,
            autoClearEmptyNode:true,
            wordCount:false,
            imagePopup:false,
            autotypeset:{ indent: true,imageBlockLine: 'center' }
        });
        ue.ready(function() {
            ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
        });
    </script>

    <!-- 编辑器容器 -->

    <script>
        $(document).ready(function(){
            var data = {};
            $("#test").select2({
                tags:true,
                data:data,
                multiple: true,
                ajax: {
                    url: "/api/topics",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term,
                        };
                    },
                    processResults: function (data) {
                        // console.log(data)
                        return {
                            results: data
                        };
                    },
                    cache: true
                },
                // escapeMarkup: function (markup) { return markup; },
                minimumInputLength: 1,
                templateResult: formatRepo,
                templateSelection: formatRepoSelection,
                escapeMarkup: function(markup){
                    return markup;
                }
            })
            function formatRepo(repo){
                // return repo.text
                console.log(repo)
                return "<div class='select2-selection_repository clearfix'>"+
                    "<div class='select2-result-repository__meta'>"+
                    "<div class='select2-results-repository__title'>"+
                repo.name ? repo.name : "laravel" + "</div></div></div>";
                
            }
            function formatRepoSelection(repo){
                // return repo.text
                // console.log(repo)
                return repo.name || repo.text;
            }
        });
       
    </script>
@endsection
